<template>
  <view class="wrap">
    <u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="left">
      <u-form-item label="名称" prop="roleName" label-width="180">
        <u-input v-model="model.roleName" placeholder="roleName"></u-input>
      </u-form-item>
      <u-form-item label="编码" prop="roleCode" label-width="180">
        <u-input v-model="model.roleCode" placeholder="roleCode"></u-input>
      </u-form-item>
      <u-form-item label="名称" prop="roleDesc" label-width="180">
        <u-input v-model="model.roleDesc" placeholder="roleDesc"></u-input>
      </u-form-item>
      <u-form-item label="类型" prop="dsType" label-width="180">
        <js-select v-model="model.dsType" placeholder="请选择数据权限类型"
                   itemLabel="label" itemValue="value" :items="dsType"></js-select>
      </u-form-item>
      <u-form-item label="范围" prop="dsType" label-width="180" v-if="checkedDsScopeShow">
        <js-checkbox v-model="checkedDsScope" itemLabel="name" itemValue="deptId" :multiple="true" :items="deptList">
        </js-checkbox>
      </u-form-item>
    </u-form>
    <view class="form-footer">
      <u-button class="btn" type="primary" @click="submit">提交</u-button>
      <u-button class="btn" type="default" @click="cancel">关闭</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: '',
      model: {
        roleId: 0,
        roleName: '',
        roleCode: '',
        roleDesc: '',
        dsType: '',
        dsScope: '',
        createBy: '',
        updateBy: '',
        createTime: '',
        updateTime: '',
        delFlag: '',
        tenantId: '',
      },
      rules: {
        roleName: [
          {required: true, message: 'roleName不能为空', trigger: 'blur'}
        ],

        roleCode: [
          {required: true, message: 'roleCode不能为空', trigger: 'blur'}
        ],

        roleDesc: [
          {required: true, message: 'roleDesc不能为空', trigger: 'blur'}
        ],

        dsType: [
          {required: true, message: 'dsType不能为空', trigger: 'blur'}
        ],

        dsScope: [
          {required: true, message: 'dsScope不能为空', trigger: 'blur'}
        ]
      },
      dsType: [
        {
          label: '全部',
          value: '0'
        }, {
          label: '自定义',
          value: '1'
        }, {
          label: '本级及子级',
          value: '2'
        }, {
          label: '本级',
          value: '3'
        },
        {
          label: '本人',
          value: '4'
        }
      ],
      deptList: [],
      checkedDsScope: [],
      checkedDsScopeShow: false
    }
  },
  onLoad(params) {
    if (params && params.id !== "undefined") {
      this.type = 'edit'
      this.$u.api.unixRole.getObj(params).then(res => {
        Object.assign(this.model, res.data);
        this.checkedDsScope = (this.model.dsScope).split(',')
        this.checkedDsScopeShow = true
      });
    } else {
      this.type = 'add'
      this.model = {}
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
    this.$u.api.unixDept.list().then(res => {
      this.deptList = res.data;
    });
  },
  methods: {
    submit() {
      this.$refs.uForm.validate(async valid => {
        if (valid) {
          this.model.dsScope = this.checkedDsScope
          if (this.type === 'edit') {
            await this.$u.api.unixRole.putObj(this.model)
          } else {
            await this.$u.api.unixRole.addObj(this.model)
          }
          setTimeout(() => {
            uni.showModal({
              title: '提示',
              content: this.type === 'edit' ? '修改成功' : '添加成功',
              showCancel: false,
              success: function () {
                uni.setStorageSync('refreshList', true);
                uni.navigateTo({
                  url: '/pages/sys/unixRole/index'
                })
              }
            })
          }, 200)
        } else {
          this.$u.toast('您填写的信息有误，请根据提示修正。')
        }
      });
    },
    cancel() {
      uni.navigateBack();
    }
  }
}
</script>

